@import '../../../styles/modules/all';

app-background {
  display: block;

  .background {
    @include background-gradient(20deg, var(--color-bg-primary), 0, var(--color-bg-secondary), 100%);

    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;

    .background-img {
      background: url('../../../../res/images/clouds.svg');
      background-repeat: repeat;
      background-size: $bg-width;
      display: block;
      height: $bg-height * 10;
      opacity: 0.15;
      position: absolute;
      top: -$bg-height;
      width: $bg-width * 10;
      z-index: 0;

      @include theme-dark {
        opacity: 0.09;
      }

      &.moving-clouds {
        @include animation-clouds;
      }
    }
  }
}
